<template>
  <div v-if="dialogValue" class="add-page">
    <BackPage title="项目详情" show-back @back="onPageBack" />

    <div class="tabs f-r a-c">
      <div
        v-for="item in tabs"
        :key="item.value"
        :class="['tab-item f-1', activeTab === item.value ? 'active' : '']"
        @click="activeTab = item.value"
      >{{ item.name }}</div>
    </div>
    <component :is="activeTab" :current-detail="currentDetail" />
  </div>
</template>

<script>
import Page1 from './page1'
import Page2 from './page2'
import Page3 from './page3'
import { http_project1 } from '@/api'

export default {
  name: 'User',
  components: {
    Page1,
    Page2,
    Page3
  },
  data() {
    return {
      dialogValue: false,
      activeTab: 'Page1',
      tabs: [
        { value: 'Page1', name: '项目信息' },
        { value: 'Page2', name: '项目进度' },
        { value: 'Page3', name: '材料（批文）信息' }
      ],
      currentDetail: {}
    }
  },
  created() {

  },
  methods: {
    open(item) {
      this.currentDetail = item
      http_project1.read({ id: item.id }).then(res => {
        this.currentDetail = res.data
      })
      this.dialogValue = true
    },
    onPageBack() {
      this.dialogValue = false
    }
  }
}
</script>

<style scoped lang="scss">
.add-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.tabs {
  width: 578px;
  height: 48px;
  background: #E6EDF5;
  border-radius: 24px 24px 24px 24px;
  padding: 0 16px;
  .tab-item  {
    height: 40px;
    border-radius: 20px 20px 20px 20px;
    text-align: center;
    color: #0A1629;
    line-height: 40px;
    font-size: 16px;
    &.active {
      background-color: #3F8CFF;
      color: #fff;
    }
  }
}
</style>
